<script setup>
import NotifyMessageList from "@/views/document/home/notifyMessageList.vue";
import MyDocument from "@/views/document/home/myDocument.vue";
import ProcessingDocument from "@/views/document/home/processingDocument.vue";
import useLoginUserStore from "@/store/modules/user.js";
import ExchangeDocument from "@/views/document/home/exchangeDocument.vue";
import useAppStore from "@/store/modules/app.js";
const device = computed(() => useAppStore().device);

const permissions = useLoginUserStore().permissions
const isContainsMyDocument = ref(permissions.indexOf("doc:my:page") >= 0)
const isContainsProcessDocument = ref(permissions.indexOf("doc:process:page") >= 0)
const isContainsExchangeDocument = ref(permissions.indexOf("doc:exchange") >= 0)

</script>

<template>
  <div class="app-container">
    <el-row :gutter="10">
      <el-col :span="18" :xs="24">
        <NotifyMessageList/>
      </el-col>
    </el-row>
    <el-row :gutter="10" class="mt10" v-if="isContainsProcessDocument || isContainsExchangeDocument">
      <el-col :span="9" :xs="24" v-if="isContainsProcessDocument">
        <ProcessingDocument/>
      </el-col>
      <el-col :span="9" :xs="24" :class="{'mt10': device === 'mobile'}" v-if="isContainsExchangeDocument">
        <ExchangeDocument/>
      </el-col>
    </el-row>
    <el-row :gutter="10" class="mt10" v-if="isContainsMyDocument">
      <el-col :span="18" :xs="24" v-if="isContainsMyDocument">
        <MyDocument/>
      </el-col>
    </el-row>
  </div>
</template>
